<template>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" @click="showSuccessMessage">
    成功操作
  </button>

  <div id="successToast" class="toast animate__pulse">操作成功！</div>
</template>

<script setup lang="ts">
import {vAutoAnimate} from '@formkit/auto-animate'
function showSuccessMessage() {
  const toast = document.getElementById('successToast') as HTMLElement;
  toast.classList.add('show');

  // 自动隐藏提示，比如2秒后
  setTimeout(function() {
    toast.classList.remove('show');
  }, 2000);
}
</script>

<style scoped>
/* 自定义样式，模拟消息提示框 */
.toast {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f0f9eb;
  border: 1px solid #b7eb8f;
  color: #40593e;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 100;
  display: none;
}
.toast.show {
  display: block;
}
</style>